<template>

    <div class="app-container" v-if="canList">
        <div class="filter-container">

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="ID"
                    v-model="listQuery.entity.todo.id">
          </el-input>

            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                      placeholder="主题"
                      v-model="listQuery.entity.todo.title">
            </el-input>


          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="评分"
                    v-model="listQuery.entity.todo.score">
          </el-input>

            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                      placeholder="业务员编号"
                      v-model="listQuery.entity.user.code">
            </el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                      placeholder="业务员名字"
                      v-model="listQuery.entity.user.name">
            </el-input>

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="管理员"
                    v-model="listQuery.entity.todo.adminName">
          </el-input>

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="上级名"
                    v-model="listQuery.entity.top.name">
          </el-input>

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="上级编号"
                    v-model="listQuery.entity.top.code">
          </el-input>

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="省区域"
                    v-model="listQuery.entity.user.province">
          </el-input>

          <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item input"
                    placeholder="市区域"
                    v-model="listQuery.entity.user.city">
          </el-input>




            <el-select @change='handleFilter' clearable class="filter-item input" style="width: 130px"
                       v-model="listQuery.entity.todo.type"
                       placeholder="类型">
                <el-option v-for="(item,index) in  typeOptions" :key="item" :label="item" :value="index">
                </el-option>
            </el-select>

            <el-select @change='handleFilter' clearable class="filter-item input" style="width: 130px"
                       v-model="listQuery.entity.todo.status"
                       placeholder="状态">
                <el-option v-for="(item,index) in  statusOptions" :key="item" :label="item" :value="index">
                </el-option>
            </el-select>

          <el-select @change='handleFilter' clearable class="filter-item input" style="width: 130px"
                     v-model="listQuery.order"
                     placeholder="排序">
            <el-option v-for="(item,index) in  orderOptions" :key="index" :label="item.name" :value="item.value">
            </el-option>
          </el-select>


            <el-date-picker
                    class="filter-item input"
                    v-model="listQuery.entity.todo.dates"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="加入时间开始日期"
                    end-placeholder="加入时间结束日期">
            </el-date-picker>



            <div style="display: inline-block">

                <el-button style="margin-left: 10px;" class="filter-item" type="primary" v-waves icon="el-icon-search"
                           @click="handleFilter">查找
                </el-button>
                <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"
                           @click="handleDownload">导出
                </el-button>
            </div>
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column align="center" label="ID号">
                <template slot-scope="scope">
<!--                    <span>{{ scope.$index+1}}</span>-->
                    <span>{{scope.row.todo.id}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="主题">
                <template slot-scope="scope">
                    <span>{{scope.row.todo.title}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="业务员ID">
                <template slot-scope="scope">
                    <span>{{scope.row.user.name}}-{{scope.row.user.code}}</span>
                </template>
            </el-table-column>

          <el-table-column align="center" label="上级">
            <template slot-scope="scope">
              <span>{{scope.row.top.name}}-{{scope.row.top.code}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="区域">
            <template slot-scope="scope">
              <span>{{scope.row.user.city}}</span>
            </template>
          </el-table-column>


            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                                                <span>

                         <el-tag :type="tagTypes[scope.row.todo.type]">     {{typeOptions[scope.row.todo.type]}}</el-tag>

                        </span>
                </template>
            </el-table-column>


            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                                                <span>
                         <el-tag :type="tagTypes[scope.row.todo.status]">     {{statusOptions[scope.row.todo.status]}}</el-tag>
                        </span>
                </template>
            </el-table-column>

          <el-table-column align="center" label="图片评分" v-if="listQuery.entity.todo.status==2">
            <template slot-scope="scope">
              <span>{{scope.row.todo.imgScore}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="总评分" v-if="listQuery.entity.todo.status==2">
            <template slot-scope="scope">
              <span>{{scope.row.todo.score}}</span>
            </template>
          </el-table-column>





          <el-table-column align="center" label="逗留">
            <template slot-scope="scope">
              <span>{{scope.row.todo.durHour}}分钟</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="管理员">
            <template slot-scope="scope">
              <span>{{scope.row.todo.adminName}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="开始时间">
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.todo.addressTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="提交时间">
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.todo.doneTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="客服评分时间">
            <template slot-scope="scope">
              <span v-if="scope.row.todo.adminTime">{{parseTime(scope.row.todo.adminTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </template>
          </el-table-column>

            <el-table-column align="center" label="日期">
                <template slot-scope="scope">
                    <span>{{parseTime(scope.row.todo.date)}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="primary" v-if="canUpdate" size="mini" @click="handleUpdate(scope,0)">详情</el-button>
                    <el-button type="danger" v-if="canUpdate&&(scope.row.todo.status==4||scope.row.todo.status==1)&&scope.row.todo.type!=8" size="mini" @click="handleUpdate(scope,1)">评分</el-button>
                    <!--                    <el-button v-if="canSave" size="mini" type="danger"-->
                    <!--                               @click="handleDelete(scope)">删除-->
                    <!--                    </el-button>-->
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination-container" style="margin-top: 20px">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog width="70%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px"
                     style='width: 80%; margin-left:50px;'>
                <el-form-item label="业务员" v-if="!showScore" prop="title">
                    <el-input :disabled="true" v-model="temp.user.name"></el-input>
                </el-form-item>


                <el-form-item label="主题"  prop="title">
                    <el-input :disabled="true" v-model="temp.todo.title"></el-input>
                </el-form-item>

                <el-form-item  v-if="!showScore" label="类型" prop="status">
                    <el-select :disabled="true" class="filter-item" v-model="temp.todo.type" placeholder="类型">
                        <el-option v-for="(item,index) in  typeOptions" :key="item" :label="item"
                                   :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item  v-if="!showScore" label="状态" prop="status">
                    <el-select :disabled="true" class="filter-item" v-model="temp.todo.status" placeholder="状态">
                        <el-option v-for="(item,index) in  statusOptions" :key="item" :label="item"
                                   :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="总评分" prop="score"   v-if="temp.todo.status===2">
                    <el-input :disabled="true" v-model="temp.todo.score"></el-input>
                </el-form-item>


                <el-form-item label="时间" prop="date">
                    <el-date-picker :disabled="true" v-model="temp.todo.date" type="date"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="时间">
                    </el-date-picker>
                </el-form-item>






              <div class="visit" v-if="temp.todo.type===6||temp.todo.type===7||temp.todo.type===9">

                <el-form-item label="主题"  prop="title">
                  <el-input :disabled="true" v-model="temp.todo.title"></el-input>
                </el-form-item>

                <el-form-item label="合照"  @mouseenter.native="mouseMove" prop="groupImg"   >

                  <el-card class="box-card">
                    <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['groupImg']!=null">
                      <span style="color:red;">{{temp.todo.scores['groupImg'].adminName}}评分:{{temp.todo.scores['groupImg'].point}}分</span>
                      <span>  {{temp.todo.scores['groupImg'].remark}}</span>
                    </div>
                    <el-upload
                        :disabled="true"
                        ref="groupImgUpload"
                        action="http://upload.qiniup.com"
                        :auto-upload="true"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :before-upload="handleUpload"
                        :on-success="handlegroupImgUploadSuccess"
                        :data="qData"
                        :file-list="groupImgList"
                        :on-remove="handlegroupImgRemove">
                      <div slot="file" slot-scope="{file}" v-if="showScore">
                        <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt=""
                        >
                         <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                      <i class="el-icon-plus"></i>
                    </el-upload>

                  </el-card>


                </el-form-item>

                <el-form-item :inline="true" v-if="showScore" label="合照" prop="imgScore">
                  <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['groupImg'].score" :max="scoreItemMap['groupImg'].score"   v-model="scoreMap['groupImg'].point"></el-input-number>
                </el-form-item>

                <el-form-item :inline="true" v-if="showScore" label="合照" >
                  <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['groupImg'].remark"></el-input>
                </el-form-item>

              </div>

                <!--拜访-->
                <div class="visit" v-if="temp.todo.type===0||temp.todo.type===3">
                    <el-form-item v-if="!showScore" label="定位信息" prop="address">
                        <el-input :disabled="true" v-model="temp.todo.address"></el-input>
                    </el-form-item>


                    <el-form-item label="价格维护" prop="priceImg">

                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['priceImg']!=null">
                                <span style="color:red;">{{temp.todo.scores['priceImg'].adminName}}评分:{{temp.todo.scores['priceImg'].point}}分</span>
                                <span>  {{temp.todo.scores['priceImg'].remark}}</span>
                            </div>

                            <el-upload
                                    :disabled="true"
                                    ref="priceImgUpload"
                                    action="http://upload.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :before-upload="handleUpload"
                                    :on-success="handlepriceImgUploadSuccess"
                                    :data="qData"
                                    :file-list="priceImgList"
                                    :on-remove="handlepriceImgRemove">
                              <div slot="file" slot-scope="{file}" v-if="showScore">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                              </div>
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-card>

                    </el-form-item>


                  <el-form-item v-if="showScore" label="价格维护" prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['priceImg'].score" :max="scoreItemMap['priceImg'].score"   v-model="scoreMap['priceImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="价格维护" >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['priceImg'].remark"></el-input>
                  </el-form-item>



                    <el-form-item label="陈列拍照" prop="displayImg">

                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['displayImg']!=null">
                                <span style="color:red;">{{temp.todo.scores['displayImg'].adminName}}评分:{{temp.todo.scores['displayImg'].point}}分</span>
                                <span>  {{temp.todo.scores['displayImg'].remark}}</span>
                            </div>

                            <el-upload
                                    :disabled="true"
                                    ref="displayImgUpload"
                                    action="http://upload.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :before-upload="handleUpload"
                                    :on-success="handledisplayImgUploadSuccess"
                                    :data="qData"
                                    :file-list="displayImgList"
                                    :on-remove="handledisplayImgRemove">
                              <div slot="file" slot-scope="{file}" v-if="showScore">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                              </div>
                                <i class="el-icon-plus"></i>
                            </el-upload>

                        </el-card>

                    </el-form-item>

                  <el-form-item v-if="showScore" label="陈列拍照"  prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['displayImg'].score" :max="scoreItemMap['displayImg'].score"   v-model="scoreMap['displayImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="陈列拍照"  >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['displayImg'].remark"></el-input>
                  </el-form-item>



                  <el-form-item label="气氛拍照" prop="airImg">

                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['airImg']!=null">
                                <span style="color:red;">{{temp.todo.scores['airImg'].adminName}}评分:{{temp.todo.scores['airImg'].point}}分</span>
                                <span>  {{temp.todo.scores['airImg'].remark}}</span>
                            </div>

                            <el-upload
                                    :disabled="true"
                                    ref="airImgUpload"
                                    action="http://upload.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :before-upload="handleUpload"
                                    :on-success="handleairImgUploadSuccess"
                                    :data="qData"
                                    :file-list="airImgList"
                                    :on-remove="handleairImgRemove">
                              <div slot="file" slot-scope="{file}" v-if="showScore">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                              </div>
                                <i class="el-icon-plus"></i>
                            </el-upload>

                        </el-card>


                    </el-form-item>


                  <el-form-item v-if="showScore" label="气氛拍照" prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['airImg'].score" :max="scoreItemMap['airImg'].score"   v-model="scoreMap['airImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="气氛拍照" >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['airImg'].remark"></el-input>
                  </el-form-item>


                  <el-form-item label="主题"  prop="title">
                    <el-input :disabled="true" v-model="temp.todo.title"></el-input>
                  </el-form-item>


                    <el-form-item label="合照" prop="groupImg">

                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['groupImg']!=null">
                                <span style="color:red;">{{temp.todo.scores['groupImg'].adminName}}评分:{{temp.todo.scores['groupImg'].point}}分</span>
                                <span>  {{temp.todo.scores['groupImg'].remark}}</span>
                            </div>
                            <el-upload
                                    :disabled="true"
                                    ref="groupImgUpload"
                                    action="http://upload.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :before-upload="handleUpload"
                                    :on-success="handlegroupImgUploadSuccess"
                                    :data="qData"
                                    :file-list="groupImgList"
                                    :on-remove="handlegroupImgRemove">
                              <div slot="file" slot-scope="{file}" v-if="showScore">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                              </div>
                                <i class="el-icon-plus"></i>
                            </el-upload>

                        </el-card>


                    </el-form-item>


                  <el-form-item v-if="showScore" label="合照" prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['groupImg'].score" :max="scoreItemMap['groupImg'].score"   v-model="scoreMap['groupImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="合照" >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['groupImg'].remark"></el-input>
                  </el-form-item>

                    <el-form-item v-if="!showScore" label="店员沟通" prop="chat">

                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['chat']!=null">
                                <span  style="color:red;">{{temp.todo.scores['chat'].adminName}}评分:{{temp.todo.scores['chat'].point}}分</span>
                                <span>  {{temp.todo.scores['chat'].remark}}</span>
                            </div>
                            <el-input
                                    :disabled="true"
                                    type="textarea"
                                    :rows="2"
                                    placeholder="店员沟通"
                                    v-model="temp.todo.chat">
                            </el-input>
                        </el-card>

                    </el-form-item>
                </div>
                <!--发放-->
                <div class="send" v-if="temp.todo.type==1||temp.todo.type==4">
                    <el-form-item v-if="!showScore" label="定位信息" prop="address">
                        <el-input :disabled="true" v-model="temp.todo.address"></el-input>
                    </el-form-item>

                    <el-form-item v-if="!showScore" label="音频" prop="status">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['audio']!=null">
                                <span style="color:red;">{{temp.todo.scores['audio'].adminName}}评分:{{temp.todo.scores['audio'].point}}分</span>
                                <span>  {{temp.todo.scores['audio'].remark}}</span>
                            </div>
                            <el-select :disabled="true" class="filter-item" v-model="temp.todo.audio" placeholder="音频">
                                <el-option v-for="(item,index) in  audioOptions" :key="item" :label="item"
                                           :value="index">
                                </el-option>
                            </el-select>
                        </el-card>

                    </el-form-item>

                    <el-form-item v-if="!showScore" label="发放数量" prop="summary">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['sendNum']!=null">
                                <span style="color:red;">{{temp.todo.scores['sendNum'].adminName}}评分:{{temp.todo.scores['sendNum'].point}}分</span>
                                <span>  {{temp.todo.scores['sendNum'].remark}}</span>
                            </div>
                            <el-input :disabled="true" v-model="temp.todo.sendNum"></el-input>
                        </el-card>

                    </el-form-item>

                    <el-form-item label="着装形象" prop="sendImg">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['sendImg']!=null">
                                <span style="color:red;">{{temp.todo.scores['sendImg'].adminName}}评分:{{temp.todo.scores['sendImg'].point}}分</span>
                                <span>  {{temp.todo.scores['sendImg'].remark}}</span>
                            </div>

                            <el-upload
                                    :disabled="true"
                                    ref="sendImgUpload"
                                    action="http://upload.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :before-upload="handleUpload"
                                    :on-success="handlesendImgUploadSuccess"
                                    :data="qData"
                                    :file-list="sendImgList"
                                    :on-remove="handlesendImgRemove">
                              <div slot="file" slot-scope="{file}" v-if="showScore">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                              </div>
                                <i class="el-icon-plus"></i>
                            </el-upload>


                        </el-card>


                    </el-form-item>

                  <el-form-item v-if="showScore" label="着装形象" prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['sendImg'].score" :max="scoreItemMap['sendImg'].score"   v-model="scoreMap['sendImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="着装形象" >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['sendImg'].remark"></el-input>
                  </el-form-item>

                </div>

                <!--活动-->
                <div class="act" v-if="temp.todo.type==2||temp.todo.type==5">


                    <el-form-item v-if="!showScore" label="新增会员数量" prop="userNum">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['userNum']!=null">
                                <span style="color:red;">{{temp.todo.scores['userNum'].adminName}}评分:{{temp.todo.scores['userNum'].point}}分</span>
                                <span>  {{temp.todo.scores['userNum'].remark}}</span>
                            </div>
                            <el-input :disabled="true" v-model="temp.todo.userNum"></el-input>
                        </el-card>
                    </el-form-item>

                    <el-form-item v-if="!showScore" label="销售数量" prop="userNum">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['sellNum']!=null">
                                <span style="color:red;">{{temp.todo.scores['sellNum'].adminName}}评分:{{temp.todo.scores['sellNum'].point}}分</span>
                                <span>  {{temp.todo.scores['sellNum'].remark}}</span>
                            </div>
                            <el-input :disabled="true" v-model="temp.todo.sellNum"></el-input>
                        </el-card>
                    </el-form-item>


                  <el-form-item label="销售照片" prop="sellImg">

                    <el-card class="box-card">
                      <div slot="header" class="clearfix"
                           v-if="temp.todo.scores&&temp.todo.scores['sellImg']!=null">
                        <span style="color:red;">{{temp.todo.scores['sellImg'].adminName}}评分:{{temp.todo.scores['sellImg'].point}}分</span>
                        <span>  {{temp.todo.scores['sellImg'].remark}}</span>
                      </div>
                      <el-upload
                          :disabled="true"
                          ref="sellImg"
                          action="http://upload.qiniup.com"
                          :auto-upload="true"
                          list-type="picture-card"
                          :on-preview="handlePictureCardPreview"
                          :before-upload="handleUpload"
                          :on-success="handleairImgUploadSuccess"
                          :data="qData"
                          :file-list="sellImgList"
                          :on-remove="handleairImgRemove">
                        <div slot="file" slot-scope="{file}" v-if="showScore">
                          <img
                              class="el-upload-list__item-thumbnail"
                              :src="file.url" alt=""
                          >
                          <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                        </div>
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-card>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="销售照片" prop="imgScore">
                    <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap['sellImg'].score" :max="scoreItemMap['sellImg'].score"   v-model="scoreMap['sellImg'].point"></el-input-number>
                  </el-form-item>

                  <el-form-item v-if="showScore" label="销售照片" >
                    <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap['sellImg'].remark"></el-input>
                  </el-form-item>


                    <div v-for="(act , index) in temp.todo.acts" :key="index">
                        <el-divider>活动{{index+1}}</el-divider>
                        <el-form-item v-if="!showScore" label="定位" prop="userNum">
                            <el-input :disabled="true" v-model="act.address"></el-input>
                        </el-form-item>

                      <el-form-item v-if="!showScore" label="时间" prop="userNum">
<!--                        <el-input :disabled="true" v-model="act.address"></el-input>-->
                        <label>{{act.actTime}}</label>
                      </el-form-item>

                        <el-form-item v-if="!showScore" label="内容" prop="userNum">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix"
                                     v-if="temp.todo.scores&&temp.todo.scores[`actInfo${index+1}`]!=null">
                                    <span style="color:red;">{{temp.todo.scores[`actInfo${index+1}`].adminName}}评分:{{temp.todo.scores[`actInfo${index+1}`].point}}分</span>
                                    <span>  {{temp.todo.scores[`actInfo${index+1}`].remark}}</span>
                                </div>
                                <el-input :disabled="true" type="textarea" v-model="act.actInfo"></el-input>
                            </el-card>

                        </el-form-item>

                        <el-form-item label="拍照" prop="actImg">

                            <el-card class="box-card">
                                <div slot="header" class="clearfix"
                                     v-if="temp.todo.scores&&temp.todo.scores[`actImg${index+1}`]!=null">
                                    <span style="color:red;">{{temp.todo.scores[`actImg${index+1}`].adminName}}评分:{{temp.todo.scores[`actImg${index+1}`].point}}分</span>
                                    <span>  {{temp.todo.scores[`actImg${index+1}`].remark}}</span>
                                </div>
                                <el-upload
                                        :disabled="true"
                                        ref="actImg"
                                        action="http://upload.qiniup.com"
                                        :auto-upload="true"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :before-upload="handleUpload"
                                        :on-success="handleairImgUploadSuccess"
                                        :data="qData"
                                        :file-list="actImgList[index]"
                                        :on-remove="handleairImgRemove">
                                  <div slot="file" slot-scope="{file}" v-if="showScore">
                                    <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                    >
                                    <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @mouseenter="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                                  </div>
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-card>
                        </el-form-item>

                      <el-form-item v-if="showScore" label="拍照" prop="imgScore">
                        <el-input-number :controls="false"   :placeholder="'最高分:'+scoreItemMap[`actImg${index+1}`].score" :max="scoreItemMap[`actImg${index+1}`].score"   v-model="scoreMap[`actImg${index+1}`].point"></el-input-number>
                      </el-form-item>

                      <el-form-item v-if="showScore" label="拍照" >
                        <el-input style="width: 400px;" placeholder="理由" v-model="scoreMap[`actImg${index+1}`].remark"></el-input>
                      </el-form-item>

                    </div>
                </div>



                <el-form-item label="物料"  prop="goods" v-if="!showScore&&temp.todo.goodsList&&temp.todo.goodsList.length>0">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['goods']!=null">
                            <span style="color:red;">{{temp.todo.scores['goods'].adminName}}评分:{{temp.todo.scores['goods'].point}}分</span>
                            <span>  {{temp.todo.scores['goods'].remark}}</span>
                        </div>
                        <el-table border :data="temp.todo.goodsList" fit>
                            <el-table-column align="center" label="产品">

                                <template slot-scope="scope">
                                    <span>{{scope.row.goodsName}}</span>
                                </template>

                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="数量">
                                <template slot-scope="scope">
                                    <span>{{scope.row.number}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-form-item>


                <el-form-item v-if="!showScore" label="总结" prop="summary">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix" v-if="temp.todo.scores&&temp.todo.scores['summary']!=null">
                            <span style="color:red;">{{temp.todo.scores['summary'].adminName}}评分:{{temp.todo.scores['summary'].point}}分</span>
                            <span>  {{temp.todo.scores['summary'].remark}}</span>
                        </div>
                        <el-input :disabled="true" type="textarea" v-model="temp.todo.summary"></el-input>
                    </el-card>
                </el-form-item>


                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialogForm">取消</el-button>
                <!--                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>-->
                <el-button v-if="showScore" type="primary" @click="updateData">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style type="stylus">
    .filter-container {
        /*padding-bottom: 20px;*/
    }

    .filter-item {
        margin-bottom: 10px;
    }

    .filter-item.input {
        /*line-height: 60px*/
        margin-right: 10px;
    }
</style>

<script>
    import {list,down, save, update, remove, info} from '@/api/todo'
    import waves from '@/directive/waves' // 水波纹指令
    import {parseTime} from '@/utils'

    import {getToken, domain} from '@/api/qiniu'
    import {listToStrs, strsToList} from '@/utils/imgUtil'

    import {mapGetters} from 'vuex'
    import {hasAuth} from '@/utils/auth'

    export default {
        name: 'test',
        directives: {
            waves
        },
        data() {
            return {
                orderOptions:[
                  {
                    name:'默认排序',
                    value:'todo.id desc'
                  },
                  {
                    name:'评分升序',
                    value:"todo.score asc"
                  },
                  {
                    name:'评分降序',
                    value:"todo.score desc"
                  }
                ],
                scoreItemMap:{},
                showScore:0,
                tableKey: 0,
                list: null,
                total: null,
                listLoading: true,
                date: null,
                listQuery: {
                    order: 'todo.id desc',
                    limit: 20,
                    json: true,
                    entity: {
                        user: {},
                        top: {},
                        todo: {
                            page: 1,
                            limit: 20,
                            order: 'id desc',
                            planId: null,
                            title: null,
                            score: null,
                            address: null,
                            summary: null,
                            userId: null,
                            groupImg: null,
                            chat: null,
                            school: null,
                            sendNum: null,
                            actName: null,
                            sellNum: null,
                            userNum: null,
                            date: null,
                            dates: null,
                            type: null,
                            status: null,
                            audio: null
                        }
                    }
                },
                typeOptions: ["药店拜访", "试用装发放", "促销活动",'拜访-帮带', '发放-帮带', '活动-帮带', '总部拜访', '连锁开发','人员招聘', '其它任务'],
                statusOptions: ['待完成', '待考核', '已评分', '已删除','待评分'],
                audioOptions: ["没有", "有"],
                tagTypes: ['info', '', 'warning', 'danger', 'warning'],
                scoreMap:{},
                temp: {
                    user: {
                        name: null,
                        code: null
                    },
                    todo: {
                        id: null,
                        planId: null,
                        date: null,
                        type: null,
                        title: null,
                        score: null,
                        address: null,
                        summary: null,
                        status: null,
                        userId: null,
                        priceImg: null,
                        displayImg: null,
                        airImg: null,
                        groupImg: null,
                        chat: null,
                        school: null,
                        audio: null,
                        sendNum: null,
                        sendImg: null,
                        sellImg:null,
                        actName: null,
                        sellNum: null,
                        userNum: null,
                        acts: [],
                        scores: {},
                        goodsList: []
                    }
                },
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {
                    update: '修改',
                    create: '新增'
                },
                // 存在图片
                dialogImageUrl: '',
                dialogVisible: false,
                priceImgList: [],
                displayImgList: [],
                airImgList: [],
                sendImgList: [],
                groupImgList: [],
                sellImgList:[],
                actImgList:[],
                rules: {
                    planId: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    date: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    type: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'blur'
                    }],
                    title: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    score: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    address: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    summary: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    status: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'blur'
                    }],
                    userId: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    priceImg: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    displayImg: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    airImg: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    groupImg: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    chat: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    school: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    audio: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'blur'
                    }],
                    sendNum: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    sendImg: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    actName: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    sellNum: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }],
                    userNum: [{
                        required: false,
                        message: '必填字段',
                        trigger: 'change'
                    }]
                },
                downloadLoading: false,
                qData: {
                    token: '',
                    key: ''
                }
            }
        },
        created() {
            this.getList()
        },
        computed: {
            ...mapGetters([
                'perms'
            ]),
            canSave() {
                return hasAuth(this.perms, 'todo:save')
            },
            canDelete() {
                return hasAuth(this.perms, 'todo:delete')
            },
            canUpdate() {
                return hasAuth(this.perms, 'todo:update')
            },
            canList() {
                return hasAuth(this.perms, 'todo:list')
            }
        },
        methods: {
            setOrder(param){
              console.log('==?'+param)
            },
            mouseMove(e){
              console.log('===>'+JSON.stringify(e))
            },
            imgList(img) {
                return strsToList(img, domain)
            },
            parseTime(time,format) {
                if(!format){
                  format = '{y}-{m}-{d}'
                }
                return parseTime(time, format)
            },
            getList() {
                this.listLoading = true
                list(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                    this.scoreItemMap  = response.extra.scoreItemMap
                })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleModifyStatus(row, status) {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                row.status = status
            },
            beforeFormShow(row) {
                this.resetTemp(row) // 更新数据
                // 存在图片
                this.initQiniu()



                //获取对应的活动

            },
            afterFormShow(row) {

            },
            beforeFormCommit() {
                this.initImgName()// 图片转换
            },
            resetTemp(row) {

                this.temp = {}
                for (const k in this.scoreItemMap) {
                  this.scoreMap[k] = {}
                  this.scoreMap = JSON.parse(JSON.stringify(this.scoreMap))
                }
                if (row) {
                    this.temp = Object.assign({}, row) // copy obj
                }

                info(this.temp.todo.id).then(res => {
                    this.temp.todo = res.data
                    // 活动
                    this.temp.todo.acts = res.extra.acts
                    let map = {}
                    // 评分
                    res.extra.scores.forEach(score => {
                        map[score.name] = score
                    })
                    this.temp.todo.scores = map
                    this.scoreMap = Object.assign(this.scoreMap,this.temp.todo.scores)
                    // 使用物料
                    this.temp.todo.goodsList = res.extra.goodsList
// 存在图片字段转换图片地址显示
                  this.initImgUrl()
                })

            },
            handleCreate() {
                this.beforeFormShow()
                this.resetTemp()
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.afterFormShow()
                    this.$refs['dataForm'].clearValidate()
                })
            },
            handleDelete(scope) {
                this.index = scope.$index
                // this.beforeFormShow(scope.row)
                // this.temp = Object.assign({}, row) // copy obj
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // })
                    this.deleteData()
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '删除失败'
                    })
                })
            },
            // 显示将图片名封装成可以展示状态集合
            initImgUrl() {
                this.priceImgList = strsToList(this.temp.todo.priceImg, domain)
                this.displayImgList = strsToList(this.temp.todo.displayImg, domain)
                this.airImgList = strsToList(this.temp.todo.airImg, domain)
                this.sendImgList = strsToList(this.temp.todo.sendImg, domain)
                this.groupImgList = strsToList(this.temp.todo.groupImg, domain)
                this.sellImgList = strsToList(this.temp.todo.sellImg, domain)
               console.log(this.temp.todo.acts)
                for (let i = 0; i < this.temp.todo.acts.length; i++) {
                  this.actImgList[i] = strsToList(this.temp.todo.acts[i].actImg, domain)
                }
                console.log(this.actImgList)
            },
            // 关闭显示窗口 重置图片地址 防止错乱
            resetImgUrl() {
                this.priceImgList = []
                this.displayImgList = []
                this.airImgList = []
                this.sendImgList = []
                this.groupImgList = []
                this.sellImgList = []
                this.actImgList = []
            },
            // 上传或者更新的时候从图片链接中获取图片名字
            initImgName() {
                this.temp.todo.priceImg = listToStrs(this.priceImgList)
                this.temp.todo.displayImg = listToStrs(this.displayImgList)
                this.temp.todo.airImg = listToStrs(this.airImgList)
                this.temp.todo.sendImg = listToStrs(this.sendImgList)
                this.temp.todo.groupImg = listToStrs(this.groupImgList)
            },
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                        if (valid) {
                            this.beforeFormCommit()
                            save(this.temp).then(res => {
                                this.temp = res.data
                                this.list.unshift(this.temp)
                                this.closeDialogForm()
                                this.$notify({
                                    title: '成功',
                                    message: '创建成功',
                                    type: 'success',
                                    duration: 2000
                                })
                            })
                        }
                    }
                )
            },
            deleteData() {
                // const ids = [this.temp.id]
                const ids = [this.list[this.index].id]
                remove({ids: ids}).then(res => {
                    // 从当前队列中移除
                    this.list.splice(this.index, 1)
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            },
            handleUpdate(scope,showScore) {
                this.showScore = showScore
                this.index = scope.$index
                this.beforeFormShow(scope.row)
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                // this.$nextTick(() => {
                //     this.$refs['dataForm'].clearValidate()
                // })
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                        if (valid) {
                            this.beforeFormCommit()
                          const names = Object.keys(this.scoreMap).map(score => score)
                          const points = Object.values(this.scoreMap).map(score => score.point || 0)
                          const remarks = Object.values(this.scoreMap).map(score => score.remark || '')
                          const todoId = this.temp.todo.id
                          update({todoId,names,points,remarks}).then((res) => {
                               // this.list.splice(this.index, 1, res.data)
                              // console.log(this.list)
                              this.getList()
                                this.closeDialogForm()
                                this.$notify({
                                    title: '成功',
                                    message: '评分成功',
                                    type: 'success',
                                    duration: 2000
                                })
                            })
                        }
                    }
                )
            },
            closeDialogForm() {
                // 存在图片
                this.resetImgUrl()
                this.dialogFormVisible = false
            },
            handleDownload() {
                this.downloadLoading = true
               down(this.listQuery).then(res=>{
                   this.downloadLoading = false
               })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                        return v[j]
                    }
                ))
            },
            // 存在图片
            handleUpload(file) {
                this.qData.key = new Date().valueOf() + file.name
            },
            initQiniu() {
                // 获取七牛配置
                getToken().then(res => {
                    this.qData.token = res.data
                }).catch(error => {
                    console.log(error)
                })
            },
            handlepriceImgUploadSuccess(response, file, fileList) {
                this.priceImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handledisplayImgUploadSuccess(response, file, fileList) {
                this.displayImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handleairImgUploadSuccess(response, file, fileList) {
                this.airImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handlesendImgUploadSuccess(response, file, fileList) {
                this.sendImgList.push({name: file.response.key, url: domain + file.response.key})
            },
            handlegroupImgUploadSuccess(response, file, fileList) {
                this.groupImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handlepriceImgRemove(file, fileList) {
                for (var fn of this.priceImgList) {
                    if (fn.name === file.name) {
                        this.priceImgList.splice(this.priceImgList.indexOf(fn), 1)
                    }
                }
            },
            handledisplayImgRemove(file, fileList) {
                for (var fn of this.displayImgList) {
                    if (fn.name === file.name) {
                        this.displayImgList.splice(this.displayImgList.indexOf(fn), 1)
                    }
                }
            },
            handleairImgRemove(file, fileList) {
                for (var fn of this.airImgList) {
                    if (fn.name === file.name) {
                        this.airImgList.splice(this.airImgList.indexOf(fn), 1)
                    }
                }
            },
            handlesendImgRemove(file, fileList) {
                for (var fn of this.sendImgList) {
                    if (fn.name === file.name) {
                        this.sendImgList.splice(this.sendImgList.indexOf(fn), 1)
                    }
                }
            },
            handlegroupImgRemove(file, fileList) {
                for (var fn of this.groupImgList) {
                    if (fn.name === file.name) {
                        this.groupImgList.splice(this.groupImgList.indexOf(fn), 1)
                    }
                }
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            }
        }
    }
</script>
